<div class="custom-field-edit container-fluid">

  <div class="row">
    <div class="edit-toolbar col-xl-12">
      <div class="title">
        <span *ngIf="!model?.id">新建字段</span>
        <span *ngIf="model?.id">编辑字段</span>
      </div>
      <div class="buttons">
        <button (click)="back()" type="button"
                class="btn btn-secondary btn-with-icon btn-sm back">
          <i class="fa fa-arrow-circle-left"></i>返回
        </button>
      </div>
    </div>
  </div>
  <hr/>

  <form *ngIf="model" [formGroup]="form" class="my-validate-form">
    <div class="form-group row">
      <label class="col-sm-2 col-form-label"><span>名称</span></label>
      <div class="col-sm-4">
        <input type="text" class="form-control" name="label" formControlName="label"
               [(ngModel)]="model.label" #label>
      </div>

      <label class="col-sm-2 col-form-label"><span>编码</span></label>
      <label class="col-sm-4 col-form-label left">
        {{model.colCode}}
        <input type="hidden" class="form-control" name="colCode" formControlName="colCode"
               [(ngModel)]="model.colCode" #colCode>
      </label>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"><span>应用对象</span></label>
      <div *ngIf="!model.buildIn" class="col-sm-4">
        <select *ngIf="module!='issue'" [(ngModel)]="model.applyTo" formControlName="applyTo" name="applyTo" class="form-control form-control-sm">
          <option value="test_case">测试用例</option>
          <!--<option value="test_result">测试结果</option>-->
        </select>

        <select *ngIf="module=='issue'" [(ngModel)]="model.applyTo" formControlName="applyTo" name="applyTo" class="form-control form-control-sm">
          <option value="issue">问题</option>
        </select>
      </div>
      <label *ngIf="model.buildIn" class="col-sm-4 col-form-label left">
        {{model.applyTo | fieldApplyTo}}
        <input type="hidden" class="form-control" name="applyTo" formControlName="applyTo"
               [(ngModel)]="model.applyTo" #applyTo>
      </label>

    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"><span>控件类型</span></label>
      <div *ngIf="!model.buildIn" class="col-sm-4">
        <select [(ngModel)]="model.input" (change)="changeInput()" formControlName="input" name="input" class="form-control form-control-sm">
          <option *ngFor="let item of inputMap | mapToArray" value="{{item.key}}">{{item.value.label}}</option>
        </select>
      </div>

      <label *ngIf="model.buildIn" class="col-sm-4 col-form-label left">
        {{inputMap[model.input].label}}
        <input type="hidden" class="form-control" name="input" formControlName="input"
               [(ngModel)]="model.input" #input>
      </label>

      <ng-container *ngIf="model.input=='dropdown' || model.input=='multi_select'
                || model.input=='radio' || model.input=='checkbox'"
                    class="form-group row">
        <label class="col-sm-2">选项列表</label>
        <div class="col-sm-4">
        <span *ngIf="form.valid" (click)="editDropdownOptions()" class="link">({{model.options.length}})</span>
        </div>
      </ng-container>

      <label class="col-sm-2 col-form-label"><span>数据类型</span></label>
      <div *ngIf="!model.buildIn" class="col-sm-4">
        <select [(ngModel)]="model.type" formControlName="type" name="type" class="form-control form-control-sm">
          <option *ngFor="let item of typeList" value="{{item.value}}">{{item.label}}</option>
        </select>
      </div>
      <label *ngIf="model.buildIn" class="col-sm-4 col-form-label left">
        {{typeMap[model.type]}}
        <input type="hidden" class="form-control" name="type" formControlName="type"
               [(ngModel)]="model.type" #type>
      </label>
    </div>

   <div *ngIf="model.type == 'text'" class="form-group row">
      <label class="col-sm-2 col-form-label"><span>行数</span></label>
      <div *ngIf="!model.buildIn" class="col-sm-10">
        <input type="text" class="form-control" name="rows" formControlName="rows"
               [(ngModel)]="model.rows" #rows>
      </div>
      <label *ngIf="model.buildIn" class="col-sm-10 col-form-label left">
        {{model.rows }}
        <input type="hidden" class="form-control" name="rows" formControlName="rows"
               [(ngModel)]="model.rows" #rows>
      </label>
    </div>

    <div *ngIf="model.type == 'text'" class="form-group row">
      <label class="col-sm-2 col-form-label"><span>格式</span></label>
      <div *ngIf="!model.buildIn" class="col-sm-10">
        <select [(ngModel)]="model.format" formControlName="format" name="format" class="form-control form-control-sm">
          <option value=""></option>
          <option *ngFor="let item of formatList" value="{{item}}">{{item | fieldFormat}}</option>
        </select>
      </div>
      <label *ngIf="model.buildIn" class="col-sm-10 col-form-label left">
        {{model.format | fieldFormat}}
        <input type="hidden" class="form-control" name="format" formControlName="format"
               [(ngModel)]="model.format" #format>
      </label>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"><span>描述</span></label>
      <div class="col-sm-10">
        <textarea type="text" class="form-control" name="descr" formControlName="descr" rows="3"
                  [(ngModel)]="model.descr" #descr></textarea>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <button (click)="save()" type="button" class="btn btn-primary"
                [disabled]="!form.valid || (model.type == 'dropdown' && model.options.length < 1)">
          保存
        </button>
        &nbsp;
        <button (click)="back()" type="button" class="btn btn-default">取消</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button (click)="showModal()" *ngIf="model.id" type="button" class="btn btn-danger">删除</button>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <div class="validate-errors">
          <div class="validate-error" *ngFor="let msg of formErrors">
            <div>{{ msg }}</div>
          </div>
        </div>
      </div>
    </div>

  </form>

  <div *ngIf="!model">
    自定制字段超过了20个
  </div>
</div>

<pop-dialog #modalWrapper (confirm)="delete()" [title]="'提示'">
  确认删除名为"{{model?.label}}"的自定义字段?
</pop-dialog>
